import React,{ useState } from 'react'
import Taro, { useReachBottom,useDidShow } from '@tarojs/taro'
import { View,Text, Button } from '@tarojs/components'
import currentEnv from '../../../configure/currentEnv';
import "taro-ui/dist/style/components/icon.scss";
import './index.less'

let filters = {
  page:1,
  pageSize: 10
}
export default function MineCoupon(props) {
  const [list,setList] = useState([])
  const [loadMore,setLoadMore] = useState('正在加载中…')
  useDidShow(()=>{
    _initData({page:1},e=>{
      setList(e.records)
    })
  })
  const RoundNum = (num, decimal = 2) => {
    return Math.round(num * 10 ** decimal) / 10 ** decimal;
  }
  function handleAddCoupon(){  /// 添加优惠券
    Taro.navigateTo({
      url:'/mineSubPack/coupon-add/index'
    })
  }
  function handleToHome(){ ///  去首页
    Taro.reLaunch({
      url:currentEnv.project=='yingjing'?'/pages/index/index':'/pages/movie/index'
    })
  }
  useReachBottom(()=>{
    if(filters.total > list.length){
      _initData({page:filters.page+1},(data)=>{
        setList([...list,...data?.records])
      })
    }else{
      setLoadMore('已经到底啦～')
    }
  })
  
  /////      network
  async function _initData(e,func){
    setLoadMore('正在加载中…')
    const data = {
      page:filters.page,
      pageSize:filters.pageSize,
      ...e
    }
    const res = await Taro.$post('/wallet/app/coupon/couponList',data)
    if(res.code == '1'){
      func(res.content)
      filters = {...filters,total:res.content.total}
      setLoadMore(filters.total<list.length?'已经到底啦～':'加载更多')
    }
  }
  return (
    <View className="mine-coupon">
      <View className='coupon-list'>
        {list.length?<>
        {list.map(res=>{
          return <View key={res.id} className="list-item" onClick={()=>{
            if(res.businessType == '1' || res.businessType == '2'){
              Taro.navigateTo({
                url:`/mineSubPack/coupon-detail/index?id=${res.id}&businessType=${res.businessType}`
              })
            }
          }}>
            <View className="item-header">
              <View className="header-info">
                <View className="info-h2 dot2"><Text className='h2-span'>{res.businessTypeDesc}</Text>{res.voucherName}</View>
                <View className="info-p">有效期至 {res.effectEndDate}</View>
              </View>
              <View className="header-price">
                <View className="price-info"><Text style={{fontSize:10,fontWeight:400}}>￥</Text>{res.couponFace}</View>
                {res.threshold}
              </View>
            </View>
            <View className="item-footer">
              {res.couponInfo || ' '}
              <View className="footer-button" onClick={()=>{handleToHome()}}>使用</View>
            </View>
          </View>
        })}
        <View className="var-more">{loadMore}</View>
        </>:<View className='var-empty'>暂无数据</View>}
      </View>
      <View className="coupon-button">
        <Button className='button' onClick={()=>{handleAddCoupon()}}>添加优惠券</Button>
      </View>
    </View>
  )
}